<!doctype html public "-//W3C//DTD HTML 4.0 Frameset//EN""http://www.w3.org/TR/REC-html40/frameset.dtd">
<html>
<head>
<title>
 Overview
</title>
<link rel ="stylesheet" type="text/css" href="stylesheet.css" title="Style">
<script>
function asd() {
	
		parent.document.title="demo.js Overview";
	
}
</script>
</head>
<body bgcolor="white" onload="asd();">

<!-- ========== START OF NAVBAR ========== -->
<a name="navbar_top"><!-- --></a>
<table border="0" width="100%" cellpadding="1" cellspacing="0">
<tr>
<td colspan=2 bgcolor="#EEEEFF" class="NavBarCell1">
<a name="navbar_top_firstrow"><!-- --></a>
<table border="0" cellpadding="0" cellspacing="3">
  <tr align="center" valign="top">
  
  
  <td bgcolor="#EEEEFF" class="NavBarCell1">    <a href="overview-summary.html"><font class="NavBarFont1"><b>Overview</b></font></a>&nbsp;</td>
  <td bgcolor="#FFFFFF" class="NavBarCell1Rev">	&nbsp;<font class="NavBarFont1Rev"><b>File</b></font>&nbsp;</td>
  

  <td bgcolor="#FFFFFF" class="NavBarCell1"> 	<font class="NavBarFont1">Class</font>&nbsp;</td>
  <td bgcolor="#EEEEFF" class="NavBarCell1">    <a href="overview-tree.html"><font class="NavBarFont1"><b>Tree</b></font></a>&nbsp;</td>
  <td bgcolor="#EEEEFF" class="NavBarCell1">    <a href="index-all.html"--><font class="NavBarFont1"><b>Index</b></font></a>&nbsp;</td>
  <td bgcolor="#EEEEFF" class="NavBarCell1">    <a href="help-doc.html"><font class="NavBarFont1"><b>Help</b></font></a>&nbsp;</td>
  </tr>
</table>
</td>
<td bgcolor="#EEEEFF" align="right" valign="top">
<em>
<b></b></em>
</td>
</tr>

<tr>
<td bgcolor="white" class="NavBarCell2"><font size="-2">
&nbsp;PREV&nbsp;
&nbsp;NEXT</font></td>
<td bgcolor="white" class="NavBarCell2"><font size="-2">
  <a href="index.html" target="_top"><b>FRAMES</b></a>  &nbsp;
&nbsp;<a href="overview-summary.html" target="_top"><b>NO FRAMES</b></a>
&nbsp;&nbsp;
<script>
  <!--
  if(window==top) {
    document.writeln('<A HREF="allclasses-noframe.html" TARGET=""><B>All Classes</B></A>');
  }
  //-->
</script>
<noscript>
<a href="allclasses-noframe.html" target=""><b>All Classes</b></a>
</noscript>
</font></td>
</tr>
</table>
<!-- =========== END OF NAVBAR =========== -->

<hr>
<center>
	
	   <h2>demo.js</h2>
	
</center>

	


<h4>Summary</h4>
<p>
	
		OpenFlightsMap Widget demo.
 See full documentation and sample code at <a href='http://openflights.org/widget/'>OpenFlights Widget</a>.

 <BR/><BR/><B>Version: </B>0.1<BR/><BR/><B>Author:</B> Jani Patokallio jani@contentshare.sg
 <BR/><B>See:</B><UL>- <a href="OpenFlightsMap.html#">OpenFlightsMap</a></UL>
	
</p>

<hr>



<!-- ========== METHOD SUMMARY =========== -->

	<a name="method_summary"><!-- --></a>
	<table border="1" cellpadding="3" cellspacing="0" width="100%">
		<tr bgcolor="#CCCCFF" class="TableHeadingColor">
			<td colspan=2>
				<font size="+2">
					<b>Method Summary</b>
				</font>
			</td>
		</tr>
	
		
		   <tr bgcolor="white" class="TableRowColor">
		      <td align="right" valign="top" width="1%">
			 <font size="-1">
			    <code>static&nbsp;void</code>
			 </font>
		      </td>
		      <td>
			 <code>
			    <b>
			       <a href="GLOBALS.html#!s!changeMap">changeMap</a></b>()
			 </code>
			 <br>
			 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			 User has requested a change to the map
		      </td>
		   </tr>
		
		   <tr bgcolor="white" class="TableRowColor">
		      <td align="right" valign="top" width="1%">
			 <font size="-1">
			    <code>static&nbsp;Object</code>
			 </font>
		      </td>
		      <td>
			 <code>
			    <b>
			       <a href="GLOBALS.html#!s!getMapType">getMapType</a></b>()
			 </code>
			 <br>
			 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			 Check which map type radio button is currently selected
		      </td>
		   </tr>
		
		   <tr bgcolor="white" class="TableRowColor">
		      <td align="right" valign="top" width="1%">
			 <font size="-1">
			    <code>static&nbsp;void</code>
			 </font>
		      </td>
		      <td>
			 <code>
			    <b>
			       <a href="GLOBALS.html#!s!onAirportSelect">onAirportSelect</a></b>(airport)
			 </code>
			 <br>
			 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			 Called by OpenFlightsMap when an airport is selected, typically used to create a popup in response.
		      </td>
		   </tr>
		
		   <tr bgcolor="white" class="TableRowColor">
		      <td align="right" valign="top" width="1%">
			 <font size="-1">
			    <code>static&nbsp;void</code>
			 </font>
		      </td>
		      <td>
			 <code>
			    <b>
			       <a href="GLOBALS.html#!s!onAirportUnselect">onAirportUnselect</a></b>(airport)
			 </code>
			 <br>
			 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			 Called by OpenFlightsMap when an airport or cluster is unselected, typically used to close its popup.<br>
 Note: If a user has previously selected airport A, and then clicks on airport B, OpenFlights will first
 call onAirportUnselect(A) and then onAirportSelect(B).
		      </td>
		   </tr>
		
	
	</table>
    <p>

<!-- ========== END METHOD SUMMARY =========== -->


        <pre class="sourceview"><span class="comment">/**
 * <span class="attrib">@fileoverview</span> OpenFlightsMap Widget demo.
 * See full documentation and sample code at {<span class="attrib">@link</span> http://openflights.org/widget/ OpenFlights Widget}.
 *
 * <span class="attrib">@see</span> OpenFlightsMap
 * <span class="attrib">@author</span> Jani Patokallio jani<span class="attrib">@contentshare</span>.sg
 * <span class="attrib">@version</span> 0.1
 */</span>

<span class="comment">/**
 * Set to "true" to enable debugging messages
 */</span>
var OF_DEBUG = true;

<span class="comment">/**
 * The OpenFlightsMap object
 */</span>
var map;

<span class="comment">/**
 * Create and load OpenFlightsMap widget on initialization
 */</span>
window.onload = <span class="reserved">function</span> init(){
  <span class="comment">// Set up localization</span>
  gt = new Gettext({ <span class="literal">'domain'</span> : <span class="literal">'messages'</span> });

  <span class="comment">// Set up OpenLayers base maps</span>
  var ol_wms = new OpenLayers.Layer.WMS( <span class="literal">"Political (Metacarta)"</span>,
					 <span class="literal">"http://labs.metacarta.com/wms/vmap0?"</span>,
					 {layers: <span class="literal">'basic'</span>},
					 {transitionEffect: <span class="literal">'resize'</span>, wrapDateLine: true}
					 );
  
  var jpl_wms = new OpenLayers.Layer.WMS(<span class="literal">"Geographical (NASA)"</span>, 
                [<span class="literal">"http://t1.hypercube.telascience.org/tiles?"</span>,
                 <span class="literal">"http://t2.hypercube.telascience.org/tiles?"</span>,
                 <span class="literal">"http://t3.hypercube.telascience.org/tiles?"</span>,
                 <span class="literal">"http://t4.hypercube.telascience.org/tiles?"</span>], 
                {layers: <span class="literal">'landsat7'</span>},
	        {transitionEffect: <span class="literal">'resize'</span>, wrapDateLine: true}
            );
  jpl_wms.setVisibility(false);

  <span class="comment">// Create OpenFlightsMap in DOM element "map" with above base layers</span>
  map = new OpenFlightsMap(<span class="literal">"map"</span>, [ol_wms, jpl_wms]);

  <span class="comment">// Load an airline map</span>
  map.load(OpenFlightsMap.AIRLINE, 32);
}

<span class="comment">/**
 * Called by OpenFlightsMap when an airport is selected, typically used to create a popup in response.
 *
 * <span class="attrib">@param</span> airport An {<span class="attrib">@link</span> http://dev.openlayers.org/docs/files/OpenLayers/Feature/Vector-js.html OpenLayers.Feature.Vector} object.  May be either a single airport or a cluster,
 * check airport.cluster to check which.  Contains attribute data under airport.attributes.*
 * (single) or airport.cluster[n].attributes.* (cluster).  List of known attributes:
 * &lt;ul&gt;
 * &lt;li&gt;apid Airport ID
 * &lt;li&gt;code Airport IATA/ICAO code
 * &lt;li&gt;desc Default description
 * &lt;li&gt;icon Airport icon
 * &lt;li&gt;name Airport name
 * &lt;/ul&gt;
 */</span>
<span class="reserved">function</span> onAirportSelect(airport) {
  map.debug(<span class="literal">"onAirportSelect()"</span>);

  <span class="comment">// Create a description of this airport or airport cluster</span>
  <span class="reserved">if</span>(airport.cluster) {
    desc = <span class="literal">"&lt;b&gt;Cluster&lt;/b&gt;:&lt;br&gt;"</span>;
    <span class="reserved">for</span>(var c = 0; c &lt; airport.cluster.length; c++) {
      desc += <span class="literal">" "</span> + airport.cluster[c].attributes.code;
    }
  } <span class="reserved">else</span> {
    desc = airport.attributes.desc + <span class="literal">", ID: "</span> + airport.attributes.apid;
  }

  <span class="reserved">if</span>(!airport.popup) {
    <span class="comment">// Create new popup</span>
    airport.popup = new OpenLayers.Popup.FramedCloud(<span class="literal">"airport"</span>, 
						     airport.geometry.getBounds().getCenterLonLat(),
						     new OpenLayers.Size(200,80),
						     desc, null, false);
    airport.popup.minSize = new OpenLayers.Size(200,80);
    airport.popup.overflow = <span class="literal">"auto"</span>;
    map.addPopup(airport.popup);
    airport.popup.show();
  } <span class="reserved">else</span> {
    <span class="comment">// Show previously created popup</span>
    airport.popup.setContentHTML(desc); <span class="comment">// in case description has changed</span>
    airport.popup.toggle();
  }
}

<span class="comment">/**
 * Called by OpenFlightsMap when an airport or cluster is unselected, typically used to close its popup.&lt;br&gt;
 * Note: If a user has previously selected airport A, and then clicks on airport B, OpenFlights will first
 * call onAirportUnselect(A) and then onAirportSelect(B).
 *
 * <span class="attrib">@param</span> airport An {<span class="attrib">@link</span> http://dev.openlayers.org/docs/files/OpenLayers/Feature/Vector-js.html OpenLayers.Feature.Vector} object.
 */</span>
<span class="reserved">function</span> onAirportUnselect(airport) {
  map.debug(<span class="literal">"onAirportUnselect()"</span>);
  airport.popup.hide();
}

<span class="comment">/**
 * Check which map type radio button is currently selected
 */</span>
<span class="reserved">function</span> getMapType() {
  var radio = document.forms[<span class="literal">'controlform'</span>].maptype;
  <span class="reserved">for</span>(var r = 0; r &lt; radio.length; r++) {
    <span class="reserved">if</span>(radio[r].checked) {
      <span class="reserved">return</span> radio[r].value;
    }
  }
}

<span class="comment">/**
 * User has requested a change to the map
 */</span>
<span class="reserved">function</span> changeMap() {
  var type = getMapType(); 
  var id = document.forms[<span class="literal">'controlform'</span>].apid.value;

  <span class="reserved">if</span>((type == <span class="literal">'L'</span> || type == <span class="literal">'R'</span>) &amp;&amp; id == <span class="literal">""</span>) {
    <span class="comment">// User has requested an airline/airport route map, but didn't give us an ID!</span>
    document.forms[<span class="literal">'controlform'</span>].apid.focus();
  } <span class="reserved">else</span> {
    <span class="comment">// Load the new map contents</span>
    map.load(type, id);
  }
}
</pre>
	<hr>



<!-- ========== START OF NAVBAR ========== -->
<a name="navbar_top"><!-- --></a>
<table border="0" width="100%" cellpadding="1" cellspacing="0">
<tr>
<td colspan=2 bgcolor="#EEEEFF" class="NavBarCell1">
<a name="navbar_top_firstrow"><!-- --></a>
<table border="0" cellpadding="0" cellspacing="3">
  <tr align="center" valign="top">
  
  
  <td bgcolor="#EEEEFF" class="NavBarCell1">    <a href="overview-summary.html"><font class="NavBarFont1"><b>Overview</b></font></a>&nbsp;</td>
  <td bgcolor="#FFFFFF" class="NavBarCell1Rev">	&nbsp;<font class="NavBarFont1Rev"><b>File</b></font>&nbsp;</td>
  

  <td bgcolor="#FFFFFF" class="NavBarCell1"> <font class="NavBarFont1">Class</font>&nbsp;</td>
  <td bgcolor="#EEEEFF" class="NavBarCell1">    <a href="overview-tree.html"><font class="NavBarFont1"><b>Tree</b></font></a>&nbsp;</td>
  <td bgcolor="#EEEEFF" class="NavBarCell1">    <a href="index-all.html"--><font class="NavBarFont1"><b>Index</b></font></a>&nbsp;</td>
  <td bgcolor="#EEEEFF" class="NavBarCell1">    <a href="help-doc.html"><font class="NavBarFont1"><b>Help</b></font></a>&nbsp;</td>
  </tr>
</table>
</td>
<td bgcolor="#EEEEFF" align="right" valign="top"><em>
<b></b></em>
</td>
</tr>

<tr>
<td bgcolor="white" class="NavBarCell2"><font size="-2">
&nbsp;PREV&nbsp;
&nbsp;NEXT</font></td>
<td bgcolor="white" class="NavBarCell2"><font size="-2">
  <a href="index.html" target="_top"><b>FRAMES</b></a>  &nbsp;
&nbsp;<a href="overview-summary.html" target="_top"><b>NO FRAMES</b></a>
&nbsp;&nbsp;
<script>
  <!--
  if(window==top) {
    document.writeln('<A HREF="allclasses-noframe.html" TARGET=""><B>All Classes</B></A>');
  }
  //-->
</script>
<noscript>
<a href="allclasses-noframe.html" target=""><b>All Classes</b></a>
</noscript>
</font></td>
</tr>
</table>
<!-- =========== END OF NAVBAR =========== -->

<hr>
<font size="-1">

</font>
<div class="jsdoc_ctime">Documentation generated by <a href="http://jsdoc.sourceforge.net/" target="_parent">JSDoc</a> on Fri Feb  5 17:41:56 2010</div>
</body>
</html>
